一、前言

• 什麼是 CSS 框架？

  這是筆者在剛開始聽到"CSS 框架"時產生的疑問，從剛接觸 CSS 到使用 SCSS 的期間也覺得這樣子的開發方式滿順的，那到底為什麼大家都在講 CSS 框架呢？於是心理產生第二個疑問。

• 用框架的目的是什麼？

  在查詢框架是什麼的過程中，最先得知的反而是使用框架的理由，由於大家遵循著 DRY (Don't Repeat Yourself) 的開發方式，藉由這種精神自然而然的會重視著專案的開發速度，框架就孕育而生。所以「框架」的目的就是"加快"開發者的開發速度，而 CSS 框架就是為了讓使用者在撰寫 CSS 樣式時加快開發速度。

二、CSS 框架

• CSS 框架運作概念

  現在知道 CSS 框架的目的是加快開發速度了，那實際上是以哪種方式進行的呢？先以原先的純寫 CSS 講起。

以一碗滷肉飯便當來舉例：

1. 純寫 CSS

   我們必須自己決定要吃什麼菜 (樣式)，並自己把菜買回來，食材處理並料理 (樣式撰寫)之後，再將這些菜色與滷肉飯結合成滷肉飯便當 (加上樣式的產物)。

2. 預處理器 (SASS、SCSS)

   我們必須自己決定要吃什麼菜，並買菜回來，但在處理食材的方式已經進步，所以整體料理的速度上加快了，最後同樣將菜色與滷肉飯結合成滷肉飯便當。

3. CSS 框架

   雖然我們一樣要吃滷肉飯便當，但這次決定直接去跟店家買現成的滷肉飯便當來吃，而這中間我們省去了決定菜色與處理食材，直接拿到的是現成的滷肉飯便當；這就是 CSS 框架的運作概念，並且這個方式最大化的體現 DRY 的開發模式。

大方向的觀念以這種方式理解，後面的章節會再做補充，希望這種舉例方式能夠幫助大家快速地理解 CSS 框架在開發過程中的角色。

• CSS 框架種類

  有哪些 CSS 框架是目前流行常用的呢？
  
  上圖來自於 State of CSS 2021，可以從圖面上看到，在最終 2021 年的統計上，前兩名為『Bootstrap』和『Tailwind』，而兩位就是下一篇文章的主角，讓我們在下一篇文章繼續了解兩者的差異性吧！